<template>
  <view class="container" >
      <view class="swiper-slide mar-bottom" v-for="item in jdata" :key="item.id" @click="skip(item.id)">
        <view class="container-itemV3">
          <view class="item-con item-front">
            <view class="btn-area click_open_layer">
			  <img :src="item.image" :alt="item.name" />
            </view>
            <a class="card-front">
              <view class="pic">
                <!-- <img class="swiper-lazy" /> -->
              </view>

              <view class="zxs_info" style="background:#ffffff;">
                <view class="title">
                  <p class="tit">{{item.name}}</p>
                  <p class="ti">{{item.type_arr_one[0]}}</p>
                </view>
                <view class="stars">
                  <img src="../../../static/img00/score.png" />
                  <img src="../../../static/img00/score.png" />
                  <img src="../../../static/img00/score.png" />
                  <img src="../../../static/img00/score.png" />
                  <img src="../../../static/img00/score.png" />
                </view>
                <view class="num">
                  <p>服务客户：{{item.clients}}人</p> 
                  <p>勘察楼盘：{{item.survey}}次</p>
                </view>
                <view class="desc">
                    {{item.description}}  
				</view>
              </view>
            </a>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  
  props: {
  	jdata:{
  		// type: Array,
  		required: true,
  	}
  },
  
  methods: {
       skip(id){
            this.$common.navigateTo("../detail/Detail?id="+id);
       }
  },
};
</script>

<style scoped>

.container{
    background: #fff;
}

.swiper-slide{
    height: 300upx;
    width: 676upx;
    border: 1upx solid #999;
    background: #fff;
    margin: 0 auto;
    border-radius: 12upx;
	margin-bottom: 20upx;
}

.btn-area{
	width: 210upx;
	height: 296upx;
	border:1upx solid #999;
	float: left;
}
.btn-area>img{
    width: 208upx;
	height: 294upx;
}

.zxs_info{
    float: left;
    margin-left:20upx ;
}
.title,.num{
	width:390upx;
	height: 38upx;
    margin: 0 auto;
    margin-top: 10upx;
}
.title>p{
    float: left;
    margin-left: 20upx;
}
.tit{
	display: inline;
    font-size: 28upx;
    font-weight: 600; 
}
.ti{
    font-size: 24upx;
    margin-top: 4upx;
}
.stars{
	height: 36upx;
	width: 390upx;
	margin-left:20upx ; 
	margin-top: 20upx;
}
.stars img{
	width:30rpx;
	height:30rpx;
}

.num>p{
    float: left;
	font-size: 24upx;
    color: rgba(20,196,196,1);
    margin-left:10upx;
}
.desc{
	font-size: 8upx;
	height:90upx;
    width:390upx;
	margin-top:8upx;
	margin-left:20upx;
    font-size: 24upx;
    font-family:Source Han Sans CN;
    color:rgba(154,154,154,1);
    text-overflow: ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical; 
	-webkit-line-clamp:3;
	line-height: 30upx;
	overflow: hidden;
}


</style>
